{% stylesheet %}
.block_video_list-warp {
  position: relative;
}

.block_video_list-warp .swiper-wrapper {
  display: flex;
  align-items: center;
}

.block_video_list-warp .swiper-button-disabled path {
  fill: #ccc !important;
}

.block_video_list-warp a {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  align-items: center;
}

.block_video_list-warp .block_video_list-image {
  width: 100%;
  height: auto;
}

.block_video_list-warp .block_video_list-next,
.block_video_list-warp .block_video_list-prev {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -25px;
  cursor: pointer;
  right: -50px;
  transition: all 0.4s ease-in-out;
}

@media screen and (max-width: 767px) {
  .block_video_list-warp .block_video_list-next,
  .block_video_list-warp .block_video_list-prev {
    display: none;
  }
}

.block_video_list-warp .block_video_list-next svg,
.block_video_list-warp .block_video_list-prev svg {
  width: 20px;
  height: 20px;
}

.block_video_list-warp .block_video_list-next svg path,
.block_video_list-warp .block_video_list-prev svg path {
  fill: #000000;
}

.block_video_list-warp .block_video_list-prev {
  left: -50px;
}

.block_video_list-warp .block_video_gid {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 767px) {
  .block_video_list-warp .block_video_gid {
    grid-gap: 15px;
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (min-width: 767px) and (max-width: 1024px) {
  .block_video_list-warp .block_video_gid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.block_video_list-warp .block_video-pc-show {
  display: flex;
}

@media screen and (max-width: 767px) {
  .block_video_list-warp .block_video-pc-show {
    display: none;
  }
}

.block_video_list-warp .block_video-pc-hide {
  display: none;
}

@media screen and (max-width: 767px) {
  .block_video_list-warp .block_video-pc-hide {
    display: block;
  }
}

.video-layer {
  padding: 30px;
  display: flex;
  position: relative;
  box-sizing: border-box;
  width: 920px;
  max-height: 510px;
  background-color: #fff;
  border-radius: 6px;
}

@media screen and (max-width: 920px) {
  .video-layer {
    flex-direction: column;
    width: calc(100vw - 30px);
    padding: 40px 15px 15px 15px;
    max-height: 80vh;
    overflow-y: auto;
  }
  .video-layer .video-layer-right .video-layer-scroll {
    overflow: inherit !important;
  }
  .video-layer .video-layer-left,
  .video-layer .video-layer-right {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .video-layer .video-layer-right {
    margin-top: 10px;
    max-height: 40vh;
    overflow: initial !important;
  }
  .video-layer iframe {
    width: 100%;
    height: calc(calc(100vw - 60px) / 4 * 3) !important;
  }
  .video-layer .youtube-info {
    flex-direction: column-reverse;
  }
  .video-layer .youtube-info .youtube-author {
    display: flex;
    width: 100% !important;
    border-top: 1px solid #dddddd;
    padding-top: 10px;
  }
  .video-layer .youtube-info .youtube-interactive {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 10px;
  }
  .youtube-interactive-item {
    margin-left: 0 !important;
  }
}

.video-layer .video-layer-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

.video-layer .video-layer-left {
  width: 450px;
  margin-right: 10px;
}

.video-layer .video-layer-left iframe {
  width: 100%;
  height: 400px;
}

.video-layer .video-layer-right {
  flex: 2;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.video-layer .video-layer-right .video-layer-scroll {
  flex: 1;
  overflow-y: auto;
}

.video-layer .video-layer-detail {
  font-size: 14px;
  color: #999999;
  margin-bottom: 20px;
}

.video-layer .video-layer-name {
  color: #333333;
  text-align: left;
  font-size: 16px !important;
  flex-shrink: 0;
}

.video-layer .video-layer-product {
  border-top: 1px dashed #dddddd;
}

.video-layer .video-layer-product-item {
  display: flex;
  padding: 20px 0;
}

.video-layer .video-layer-product-item .video-layer-product-item-pic {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

.video-layer .video-layer-product-item .video-layer-product-item-pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-layer .video-layer-product-item .video-layer-product-item-info {
  flex: 1;
  margin-left: 10px;
  overflow: hidden;
}

.video-layer .video-layer-product-item .video-layer-product-item-info .video-layer-product-item-name {
  font-size: 14px;
  display: block;
}

.video-layer .video-layer-product-item .video-layer-product-item-info .video-layer-product-item-price {
  margin-top: 10px;
}

.video-layer .video-layer-product-item .video-layer-product-item-info .video-layer-product-item-btn {
  margin-top: 10px;
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  background: var(--main_button_bg);
  color: var(--main_button_color);
  border-radius: var(--button_border_radius);
  cursor: pointer;
}

.video-layer .youtube-info {
  padding: 12px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
}

.video-layer .youtube-info .youtube-author,
.video-layer .youtube-info .youtube-author .youtube-icon,
.video-layer .youtube-info .youtube-interactive,
.video-layer .youtube-info .youtube-interactive-item {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.video-layer .youtube-info .youtube-author .youtube-icon,
.video-layer .youtube-info .youtube-interactive .youtube-icon,
.video-layer .youtube-info .youtube-interactive-item .youtube-icon {
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: #ff0000;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.video-layer .youtube-info .youtube-author span,
.video-layer .youtube-info .youtube-author .youtube-icon span,
.video-layer .youtube-info .youtube-interactive span,
.video-layer .youtube-info .youtube-interactive-item span {
  margin-left: 10px;
  font-size: 14px;
}

.video-layer .youtube-info .youtube-interactive .youtube-close {
  display: none;
}

.video-layer .youtube-info .youtube-interactive-item {
  margin-left: 20px;
}

.video-layer .youtube-info .youtube-interactive-item span {
  margin-left: 10px;
  font-size: 14px;
  color: #999999;
}

.block_video_list-more {
  text-align: center;
  margin-top: calc(var(--general_layout_spacing) * 0.5);
}

@media screen and (max-width: 767px) {
  .block_video_list-more {
    margin-top: 30px;
  }
}

.block_video_list-more .secondary_btn {
  display: inline-flex;
  align-items: center;
}

.block_video_list-more a {
  margin: 0;
}

{% endstylesheet %}

{% assign blockId = block_id | default : section.block_id %}

<div class="block_video_list container_wrapper">
  {% include 'block_title', title:section.settings.title , detail:section.settings.detail %}

    {% assign video_ids = section.blocks | get_array_values: "video" | get_array_values: "id" | join: "," %}
    <div class="block_video_list-warp">
        <div style="overflow: hidden; width: 100%;min-height:100px" id="block_video_list-{{blockId}}">
            {% if section.blocks.size > 0 %} {% if section.settings.show_type == '1' %}
            <ul class="swiper-wrapper block_video-pc-show"></ul>
            {% endif %}

            <div class="{% if section.settings.show_type == '1' %}block_video-pc-hide{% endif %}">
                <div class="block_video_gid"></div>
            </div>
            {% else %}
            <div class="block_video_gid"></div>
            {% endif %}
        </div>
        {% if section.settings.show_type == '1' and section.blocks.size > 4 %}
        <div class="block_video_list-prev" id="block_prev_{{ blockId  }}">{% include 'icon_silde_left' ,width:'24',height:'24' %}</div>
        <div class="block_video_list-next" id="block_next_{{ blockId  }}">{% include 'icon_silde_right' ,width:'24',height:'24' %}</div>
        {% endif %}
    </div>
    {% if section.settings.more_text != ""%}
        <div class="block_video_list-more"><a class="secondary_btn" href="{{ section.settings.link | default : 'javascript:;'}}">
          <svg t="1648098679668" style="margin-right:8px"  class="youtube-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2931" width="24" height="24"><path fill="red" d="M941.3 296.1c-10.3-38.6-40.7-69-79.2-79.3C792.2 198 512 198 512 198s-280.2 0-350.1 18.7C123.3 227 93 257.4 82.7 296 64 366 64 512 64 512s0 146 18.7 215.9c10.3 38.6 40.7 69 79.2 79.3C231.8 826 512 826 512 826s280.2 0 350.1-18.8c38.6-10.3 68.9-40.7 79.2-79.3C960 658 960 512 960 512s0-146-18.7-215.9zM423 646V378l232 133-232 135z" p-id="2932"></path></svg>
          <span>{{ section.settings.more_text }}</span>
        </a></div>
    {% endif %}
    <script type="text/html" id="video-default-layer">
    {% raw %}
        <div class="video-layer">
            <a href="javascript:;" class="video-layer-close popup-close">
                <svg t="1633405599567" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1984" width="16" height="16"><path d="M453.44 512L161.472 220.032a41.408 41.408 0 0 1 58.56-58.56L512 453.44 803.968 161.472a41.408 41.408 0 0 1 58.56 58.56L570.56 512l291.968 291.968a41.408 41.408 0 0 1-58.56 58.56L512 570.56 220.032 862.528a41.408 41.408 0 0 1-58.56-58.56L453.44 512z" p-id="1985"></path></svg>
            </a>
            <div class="video-layer-left">
                <iframe id="ytplayer" type="text/html" src="{{videoInfo.url}}" frameborder="0" allowfullscreen></iframe>
                <div class="youtube-info" >
                    <div class="youtube-author" style="width: 40%;">
                        <a href="{{ channelLink | default : 'javascript:;'}}"  target="_blank" class="youtube-icon">
                          {%- if avatar -%}
                          <img src="{{avatar}}" style="width:30px;height:30px" />
                          {%- else -%}
                            <svg t="1622698620162" class="icon" viewBox="0 0 1024 1024" width="22" height="22" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23166">
                                <path
                                    d="M612.179 698.398v113.032q0 35.895-20.878 35.895-12.308 0-24.101-11.794v-161.234q11.794-11.794 24.101-11.794 20.878 0 20.878 35.895zM793.229 698.947v24.65h-48.202v-24.65q0-36.409 24.101-36.409t24.101 36.409zM275.758 582.177h57.322v-50.362h-167.131v50.362h56.258v304.812h53.585v-304.812zM430.032 886.991h47.688v-264.633h-47.688v202.477q-16.079 22.49-30.547 22.49-9.634 0-11.245-11.245-0.548-1.612-0.548-18.753v-195.003h-47.688v209.437q0 26.261 4.285 39.117 6.411 19.816 31.060 19.816 25.713 0 54.648-32.672v28.935zM659.833 807.693v-105.524q0-39.117-4.834-53.036-9.119-29.998-38.020-29.998-26.775 0-49.813 28.935v-116.255h-47.688v355.14h47.688v-25.713q24.101 29.45 49.813 29.45 28.935 0 38.020-29.45 4.834-14.468 4.834-53.585zM840.917 802.345v-6.959h-48.751q0 27.323-1.063 32.672-3.737 19.267-21.428 19.267-24.65 0-24.65-36.957v-46.591h95.89v-55.162q0-42.306-14.468-62.155-20.878-27.323-56.773-27.323-36.409 0-57.322 27.323-15.016 19.816-15.016 62.155v92.668q0 42.306 15.531 62.155 20.878 27.323 57.836 27.323 38.569 0 57.836-28.387 9.634-14.467 11.245-28.935 1.063-4.834 1.063-31.060zM515.226 313.26v-112.483q0-36.957-23.038-36.957t-23.038 36.957v112.483q0 37.506 23.038 37.506t23.038-37.506zM900.364 715.574q0 125.34-13.919 187.495-7.508 31.609-31.060 53.036t-54.648 24.65q-98.564 11.245-297.305 11.245t-297.305-11.245q-31.060-3.222-54.922-24.65t-30.787-53.036q-13.919-59.995-13.919-187.495 0-125.34 13.919-187.495 7.508-31.609 31.060-53.036t55.162-25.164q98.016-10.731 296.756-10.731t297.305 10.731q31.060 3.737 54.922 25.164t30.787 53.036q13.919 59.995 13.919 187.495zM365.751 32.035h54.648l-64.83 213.722v145.155h-53.585v-145.155q-7.508-39.632-32.672-113.58-19.816-55.162-34.832-100.176h56.773l38.020 140.87zM563.977 210.41v93.73q0 43.403-15.016 63.218-19.816 27.323-56.773 27.323-35.895 0-56.258-27.323-15.016-20.364-15.016-63.218v-93.73q0-42.854 15.016-62.67 20.364-27.323 56.258-27.323 36.957 0 56.773 27.323 15.016 19.816 15.016 62.67zM743.415 123.639v267.307h-48.751v-29.45q-28.387 33.22-55.162 33.22-24.65 0-31.609-19.816-4.285-12.856-4.285-40.18v-211.048h48.751v196.581q0 17.691 0.548 18.753 1.612 11.794 11.245 11.794 14.468 0 30.547-23.038v-204.088h48.751z"
                                    fill="#fff"
                                ></path>
                            </svg>
                          {%- endif -%}
                        </a>
                        <a href="{{ channelLink | default : 'javascript:;'}}" class="text-white-space" target="_blank" style="color:#999999;font-weight: bold;margin-left: 10px;font-size: 14px;">{{userName}}</a>
                    </div>
                    <div class="youtube-interactive">
                        <a href="javascript:;" class="youtube-interactive-item">
                            <svg t="1646975399105" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6233" width="22" height="22"><path d="M1006.04992 470.016C997.60192 455.232 830.81792 128 507.74592 128S17.95392 455.232 9.50592 470.016a80.768 80.768 0 0 0 0 76.032c8.448 14.784 175.232 342.08 498.24 342.08s489.856-327.296 498.304-342.08a95.168 95.168 0 0 0 0-76.032z m-498.304 333.632c-274.432 0-422.4-295.616-422.4-295.616s147.84-295.616 422.4-295.616 422.4 295.616 422.4 295.616-147.904 295.616-422.4 295.616z" fill="#999999" p-id="6234"></path><path d="M507.74592 339.008a168.896 168.896 0 1 0 168.96 168.896 169.408 169.408 0 0 0-168.96-168.896z m0 253.376a84.48 84.48 0 1 1 84.48-84.48 84.736 84.736 0 0 1-84.48 84.608z" fill="#999999" p-id="6235"></path></svg>
                            <span>{{viewCount}}</span>
                        </a>
                        <a href="javascript:;" class="youtube-interactive-item">
                            <svg t="1648521741904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4606" width="22" height="22"><path d="M622.933333 341.333333H896a85.333333 85.333333 0 0 1 85.333333 85.333334v89.770666a85.333333 85.333333 0 0 1-6.4 32.512l-132.053333 320.64a42.666667 42.666667 0 0 1-39.466667 26.410667H85.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V426.666667a42.666667 42.666667 0 0 1 42.666666-42.666667h148.565334a42.666667 42.666667 0 0 0 34.858666-18.048L501.418667 36.266667a21.333333 21.333333 0 0 1 26.965333-6.784l77.397333 38.698666a106.666667 106.666667 0 0 1 55.68 121.728L622.933333 341.333333zM298.666667 451.754667V810.666667h476.16L896 516.437333V426.666667h-273.066667a85.333333 85.333333 0 0 1-82.688-106.368l38.528-151.381334a21.333333 21.333333 0 0 0-11.136-24.362666l-28.202666-14.08-200.96 284.672c-10.666667 15.104-24.32 27.477333-39.808 36.608zM213.333333 469.333333H128v341.333334h85.333333v-341.333334z" p-id="4607" fill="#999999"></path></svg>
                            <span>{{likeCount}}</span>
                        </a>
                        <a href="javascript:;" class="youtube-interactive-item">
                            <svg t="1646975438725" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6459" width="22" height="22"><path d="M852.736 128h-710.4A78.592 78.592 0 0 0 63.808 206.528v518.4a78.592 78.592 0 0 0 78.528 78.528h186.88l144.64 118.08a39.104 39.104 0 0 0 24.576 8.704 38.4 38.4 0 0 0 24.384-8.704l145.408-118.08h184.192a78.592 78.592 0 0 0 78.528-78.528v-518.4A78.464 78.464 0 0 0 852.736 128z m0.96 596.992a1.088 1.088 0 0 1-0.96 0.96h-197.952a38.4 38.4 0 0 0-24.448 8.704l-131.648 106.816-130.88-106.816a38.784 38.784 0 0 0-24.512-8.704H142.528a1.088 1.088 0 0 1-0.96-0.96v-518.4a1.088 1.088 0 0 1 0.96-0.96h710.4a1.024 1.024 0 0 1 0.96 0.96v518.4z" p-id="6460" fill="#999999"></path><path d="M265.088 466.752a48.448 48.448 0 1 0 48.448-48.512 48.448 48.448 0 0 0-48.448 48.512z" p-id="6461" fill="#999999"></path><path d="M450.24 466.752a48.448 48.448 0 1 0 48.448-48.512 48.448 48.448 0 0 0-48.448 48.512z" p-id="6462" fill="#999999"></path><path d="M635.584 466.752a48.448 48.448 0 1 0 48.448-48.512 48.448 48.448 0 0 0-48.448 48.512z" p-id="6463" fill="#999999"></path></svg>
                            <span>{{commentCount}}</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="video-layer-right">
                <a href="javascript:;" class="video-layer-name line-clamp2 general_title-color">{{name}}</a>
                <div style="color:#999999 ; padding:10px 0;">{{videoInfo.date}}</div>
                <div class="video-layer-scroll">
                    {% if detail != "" %}
                    <div class="video-layer-detail">{{detail | newline_to_br}}</div>
                    {% endif %}
                    {% for product in products %}
                        
                    <div class="video-layer-product">
                        <div class="video-layer-product-item">
                            <a href="/products/{{product.handle}}?data_from={{data_from}}" class="video-layer-product-item-pic">
                                <img  data-src="{{ product.image.src }}" src="{{empty_loading.png|public_asset_abs_url}}"  alt="{{product.image.alt | default : product.title}}" />
                            </a>
                            <div class="video-layer-product-item-info">
                                <a href="/products/{{product.handle}}?data_from={{data_from}}" class="video-layer-product-item-name text-white-space general_title-color" href="javascript:;">{{product.title}}</a>
                                <div class="video-layer-product-item-price"><span class="general_buying-color">{{product.variant.price | money}}</span></div>
                                {% if btnText != "" %}
                                <a href="/products/{{product.handle}}?data_from={{data_from}}" class="video-layer-product-item-btn">{{btnText}}</a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}

                   
                </div>
            </div>
        </div>
    {% endraw %}
    </script>

    <script type="text/html" id="video_list-item">
        {% raw %}
        {% for item in videoList %}
        {% assign video = item.info %}
        <div class="zuui-video-item swiper-slide" data-product="{{item.productIds}}" data-user-name="{{video.channel.title }}" data-channel-link="{{video.channelLink }}" data-avatar="{{video.channel.thumbnails.medium.url }}"  data-video-info='{url:"{{item.video.model}}",date:"{{video.snippet.publishedAt }}"}'>
          
            <div class="youtube_pic">
              {% if video.snippet.thumbnails.medium.url %}
              <img src="{{video.snippet.thumbnails.medium.url}}"> 
              <div class="youtube-icon-hover">
              <svg t="1648098679668"  class="youtube-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2931" width="58" height="58"><path fill="#ddd" d="M941.3 296.1c-10.3-38.6-40.7-69-79.2-79.3C792.2 198 512 198 512 198s-280.2 0-350.1 18.7C123.3 227 93 257.4 82.7 296 64 366 64 512 64 512s0 146 18.7 215.9c10.3 38.6 40.7 69 79.2 79.3C231.8 826 512 826 512 826s280.2 0 350.1-18.8c38.6-10.3 68.9-40.7 79.2-79.3C960 658 960 512 960 512s0-146-18.7-215.9zM423 646V378l232 133-232 135z" p-id="2932"></path></svg>
              </div>
              {% elsif item.video.model != "" %}
              <svg t="1648199679625" class="icon" viewBox="0 0 1077 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20132" width="60" height="60"><path d="M650.271124 497.731368l-217.195789-131.045052a18.728421 18.728421 0 0 0-28.389053 16.033684v262.090105a18.674526 18.674526 0 0 0 28.402526 16.033684l217.19579-131.045052a18.728421 18.728421 0 0 0 0-32.067369z m0 0" fill="#999999" p-id="20133"></path><path d="M665.887124 945.623579a462.376421 462.376421 0 1 1 292.378948-365.877895 246.851368 246.851368 0 0 1 35.84 15.845053 500.439579 500.439579 0 1 0-304.74779 381.453474 248.926316 248.926316 0 0 1-23.471158-31.420632z" fill="#999999" p-id="20134"></path><path d="M875.079545 611.759158a202.105263 202.105263 0 1 0 202.105263 202.105263 202.105263 202.105263 0 0 0-202.105263-202.105263z m30.773895 348.968421a38.076632 38.076632 0 0 1-13.123368 13.743158 29.049263 29.049263 0 0 1-16.855579 3.745684 35.947789 35.947789 0 0 1-17.812211-4.365474 30.127158 30.127158 0 0 1-12.126316-12.786526 38.265263 38.265263 0 0 1-4.365473-17.81221 35.031579 35.031579 0 0 1 4.365473-16.855579 28.294737 28.294737 0 0 1 12.490106-12.126316 45.338947 45.338947 0 0 1 17.515789-4.688842 32.916211 32.916211 0 0 1 16.855579 4.365473 35.354947 35.354947 0 0 1 12.490105 12.8 35.799579 35.799579 0 0 1 5.295158 16.855579 31.905684 31.905684 0 0 1-4.729263 17.111579z m9.903158-248.468211l-19.550316 151.026527a39.895579 39.895579 0 0 1-6.426947 14.618947 15.063579 15.063579 0 0 1-14.672842 6.4 16.734316 16.734316 0 0 1-13.554527-6.4 26.179368 26.179368 0 0 1-6.022737-14.672842l-18.863157-151.026526a41.768421 41.768421 0 0 1 0.754526-21.086316 37.497263 37.497263 0 0 1 12.786526-16.936421 41.768421 41.768421 0 0 1 24.845474-8.650105 43.978105 43.978105 0 0 1 24.845474 7.518315 32.808421 32.808421 0 0 1 14.309052 17.690948 51.2 51.2 0 0 1 1.549474 21.436631z" fill="#999999" p-id="20135"></path></svg>
              {% else %}
              <svg t="1642562311355" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19148" width="60" height="60"><path d="M982.096842 123.724351H44.867368A44.912281 44.912281 0 0 0 0 168.591719v686.816562a44.912281 44.912281 0 0 0 44.867368 44.91228h937.229474a44.912281 44.912281 0 0 0 44.867369-44.91228V168.591719a44.912281 44.912281 0 0 0-44.867369-44.867368z m19.536842 44.867368v226.474667H807.855158V149.054877h174.259649a19.563789 19.563789 0 0 1 19.518877 19.536842z m-782.515649 443.46386H25.339509V411.953404h193.778526z m25.330526-463.000702h538.049123v725.899228h-538.049123z m563.415579 262.907509h193.778527v200.08421H807.86414zM44.876351 149.054877h174.259649v246.020491H25.357474V168.591719a19.563789 19.563789 0 0 1 19.518877-19.536842zM25.339509 855.408281V628.933614h193.778526v246.020491h-174.259649a19.563789 19.563789 0 0 1-19.518877-19.545824z m956.766316 19.545824h-174.25965V628.933614h193.778527v226.474667a19.563789 19.563789 0 0 1-19.52786 19.545824z" fill="#BBBBBB" p-id="19149"></path><path d="M421.313123 640.368281a30.450526 30.450526 0 0 1-16.375018-4.581053 33.926737 33.926737 0 0 1-14.758175-29.76786V416.956632a34.007579 34.007579 0 0 1 14.632421-29.87565 34.573474 34.573474 0 0 1 33.783017-0.152701l167.468913 84.039859c26.821614 13.680281 30.75593 31.600281 30.711017 41.058807s-4.096 27.297684-30.818807 40.663579l-24.252631 12.449685-142.264141 70.826666a42.109754 42.109754 0 0 1-18.126596 4.401404z m-0.422176-228.666386a2.003088 2.003088 0 0 0-0.646736 0.071859 10.778947 10.778947 0 0 0-0.898246 5.173895v189.062737a7.913544 7.913544 0 0 0 1.149754 5.12 9.171088 9.171088 0 0 0 6.161965-1.347368l166.175439-83.08772c9.054316-4.491228 14.830035-10.31186 14.848-14.803087 0-3.592982-3.862456-9.377684-14.785123-14.95579l-167.073684-83.869193a11.838877 11.838877 0 0 0-4.931369-1.356351z" fill="#BBBBBB" p-id="19150"></path></svg>
              {% endif %}
              {% if video.contentDetails.duration %}
              <div class="youtube_pic-item" data-date="{{video.contentDetails.duration}}"></div>
              {% endif %}
              
            </div>
            <div class="youtube_info">
              <div class="youtube_name text-white-space">{{video.snippet.title | default:"Title"}}</div>
              {% if video.snippet.description %}
              <div class="youtube_detail line-clamp2">{{video.snippet.description}}</div>
              {% endif %}
            </div>
            <div class="youtube_bom">
              <a class="youtube_bom-item" href="javascript:void(0);">
                <svg t="1646975399105" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6233" width="22" height="22"><path d="M1006.04992 470.016C997.60192 455.232 830.81792 128 507.74592 128S17.95392 455.232 9.50592 470.016a80.768 80.768 0 0 0 0 76.032c8.448 14.784 175.232 342.08 498.24 342.08s489.856-327.296 498.304-342.08a95.168 95.168 0 0 0 0-76.032z m-498.304 333.632c-274.432 0-422.4-295.616-422.4-295.616s147.84-295.616 422.4-295.616 422.4 295.616 422.4 295.616-147.904 295.616-422.4 295.616z" fill="#999999" p-id="6234"></path><path d="M507.74592 339.008a168.896 168.896 0 1 0 168.96 168.896 169.408 169.408 0 0 0-168.96-168.896z m0 253.376a84.48 84.48 0 1 1 84.48-84.48 84.736 84.736 0 0 1-84.48 84.608z" fill="#999999" p-id="6235"></path></svg>
                {%- capture viewCount -%}
                {%- if video.statistics.viewCount > 100 -%}
                  {{video.statistics.viewCount | divided_by : 100 | round | divided_by : 10 }}K
                {% else %}
                  {{video.statistics.viewCount | default : "0" }}
                {%- endif -%}
                {%- endcapture -%}
                <span class="num viewCount text-white-space">{{viewCount}}</span>
              </a>
              <a class="youtube_bom-item" href="javascript:void(0);">
                <svg t="1648521741904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4606" width="22" height="22"><path d="M622.933333 341.333333H896a85.333333 85.333333 0 0 1 85.333333 85.333334v89.770666a85.333333 85.333333 0 0 1-6.4 32.512l-132.053333 320.64a42.666667 42.666667 0 0 1-39.466667 26.410667H85.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V426.666667a42.666667 42.666667 0 0 1 42.666666-42.666667h148.565334a42.666667 42.666667 0 0 0 34.858666-18.048L501.418667 36.266667a21.333333 21.333333 0 0 1 26.965333-6.784l77.397333 38.698666a106.666667 106.666667 0 0 1 55.68 121.728L622.933333 341.333333zM298.666667 451.754667V810.666667h476.16L896 516.437333V426.666667h-273.066667a85.333333 85.333333 0 0 1-82.688-106.368l38.528-151.381334a21.333333 21.333333 0 0 0-11.136-24.362666l-28.202666-14.08-200.96 284.672c-10.666667 15.104-24.32 27.477333-39.808 36.608zM213.333333 469.333333H128v341.333334h85.333333v-341.333334z" p-id="4607" fill="#999999"></path></svg>
                {%- capture likeCount -%}
                {%- if video.statistics.likeCount > 100 -%}
                  {{video.statistics.likeCount | divided_by : 100 | round | divided_by : 10 }}K
                {% else %}
                  {{video.statistics.likeCount | default : "0" }}
                {%- endif -%}
                {%- endcapture -%}
                <span class="num likeCount text-white-space">{{likeCount}}</span>
              </a>
              <a class="youtube_bom-item" href="javascript:void(0);">
                <svg t="1646975438725" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6459" width="22" height="22"><path d="M852.736 128h-710.4A78.592 78.592 0 0 0 63.808 206.528v518.4a78.592 78.592 0 0 0 78.528 78.528h186.88l144.64 118.08a39.104 39.104 0 0 0 24.576 8.704 38.4 38.4 0 0 0 24.384-8.704l145.408-118.08h184.192a78.592 78.592 0 0 0 78.528-78.528v-518.4A78.464 78.464 0 0 0 852.736 128z m0.96 596.992a1.088 1.088 0 0 1-0.96 0.96h-197.952a38.4 38.4 0 0 0-24.448 8.704l-131.648 106.816-130.88-106.816a38.784 38.784 0 0 0-24.512-8.704H142.528a1.088 1.088 0 0 1-0.96-0.96v-518.4a1.088 1.088 0 0 1 0.96-0.96h710.4a1.024 1.024 0 0 1 0.96 0.96v518.4z" p-id="6460" fill="#999999"></path><path d="M265.088 466.752a48.448 48.448 0 1 0 48.448-48.512 48.448 48.448 0 0 0-48.448 48.512z" p-id="6461" fill="#999999"></path><path d="M450.24 466.752a48.448 48.448 0 1 0 48.448-48.512 48.448 48.448 0 0 0-48.448 48.512z" p-id="6462" fill="#999999"></path><path d="M635.584 466.752a48.448 48.448 0 1 0 48.448-48.512 48.448 48.448 0 0 0-48.448 48.512z" p-id="6463" fill="#999999"></path></svg>
                {%- capture commentCount -%}
                {%- if video.statistics.commentCount > 100 -%}
                  {{video.statistics.commentCount | divided_by : 100 | round | divided_by : 10 }}K
                {% else %}
                  {{video.statistics.commentCount | default : "0" }}
                {%- endif -%}
                {%- endcapture -%}
                <span class="num commentCount text-white-space">{{commentCount}}</span>
              </a>
            </div>
          </div>
        {% endfor %}
        {% endraw %}
    </script>
</div>

<script type="text/javascript">
(function(){
const blockId = "{{ blockId  }}";
const video_ids = "{{video_ids}}";
const blocks = {{section.blocks | json}};
const videoitemTemp = $("#video_list-item").html();
const videoWarpDOM = $("#block_video_list-{{blockId}}");
var youtubeKeys = ["AIzaSyANjnQbRvx_nbEGRLByYaTVMErVMD4Q4qQ","AIzaSyB4aGpGuSuv4Jx_-HU1Dqw68orm-Lh_64A","AIzaSyABLltWm1BnKTDBabWQOrlZLTqApgy68ko","AIzaSyBQfa_cskszzemvtkf7FgmgKui57B4WCsE"];
var youtubeKey = youtubeKeys[moi.randomInteger(0,2)];
if (video_ids) {
    let videoList = [];
    const load = moi.nodeShowLoading(videoWarpDOM,"mo-loading-black");
    $.ajax({
        type: "get",
        url: "https://www.googleapis.com/youtube/v3/videos",
        data: {
            id: video_ids,
            part: "snippet,statistics,status,contentDetails",
            key: youtubeKey
        },
        timeout:10000, 
        dataType: "json",
        success: function (response) {
            videoList = response.items;
            const channelIds = [];
            if(videoList.length){
              videoList.forEach((item) => {
                channelIds.push(item.snippet.channelId);
              });
              getChannels(channelIds.join(","));
            }else{
              rederVideos(blocks);
              load.close();
            }
        },
        error:function(){
            rederVideos(blocks);
            load.close();
        }
    });

    
    function getChannels(id) {
        $.ajax({
            type: "get",
            url: "https://youtube.googleapis.com/youtube/v3/channels",
            data: {
                id: id,
                part: "snippet",
                key: youtubeKey
            },
            timeout:10000, 
            dataType: "json",
            success: function (response) {
                load.close();
                response.items.forEach((item, index) => {
                    videoList[index]["channel"] = item.snippet;
                    videoList[index]["channelLink"] = "https://www.youtube.com/channel/"+item.id;
                    
                });
                mergeVideos();
            },
            error:function(){
                rederVideos(blocks);
                load.close();
            }
        });
    }

    function mergeVideos() {
        blocks.forEach((block) => {
            const index = videoList.findIndex((item) => item.id === block.video.id);
            if (index !== -1) {
                block["info"] = videoList[index];
                block["info"]["model"] = block.video.model;
                
            }
        });
        rederVideos(blocks)
    }
}else{
    rederVideos([{},{},{},{}]);
}

function rederVideos(blocks){
    blocks.forEach((block) => {
            block["productIds"] = block.products.map((item) => item.id);
    });
    engine.parseAndRender(videoitemTemp, {
        lang: lang,
        videoList: blocks
    }).then(function (html) {
                videoWarpDOM.find(".swiper-wrapper").append(html);
                videoWarpDOM.find(".block_video_gid").append(html);
                new Swiper("#block_video_list-{{blockId}}", {
                    slidesPerView: 4,
                    spaceBetween: 30,
                    navigation: {
                        nextEl: "#block_next_{{ blockId  }}",
                        prevEl: "#block_prev_{{ blockId  }}"
                    },
                    breakpoints: {
                        1024: {
                            slidesPerView: 3,
                            spaceBetween: 20
                        }
                    }
                });

                const youtubeDateDOM = videoWarpDOM.find(".youtube_pic-item");
                youtubeDateDOM.each(function () {
                    const date = $(this).attr("data-date");
                    if (date) {
                        const tiemr = [];
                        date.replace("PT", "")
                            .replace(/M|H|S/g, ",")
                            .split(",")
                            .forEach((element) => {
                                if (element) {
                                    tiemr.push(parseInt(element)<10?("0"+element):element);
                                }
                            });
                        if(tiemr.length !== 3){
                          date.indexOf("H") > -1?tiemr.push("00"):tiemr.unshift("00")
                        }
                     
                        $(this).html(tiemr.join(":"));
                    }
                });

                bindVideoItemClick()
    })
    .catch((err) => {
        console.log(err);
    });
                
}

function bindVideoItemClick(){
const videoLayerHtml = $("#video-default-layer").html();
videoWarpDOM.find(".zuui-video-item").click(function () {
    const that = $(this);
    const productIds = that.attr("data-product");
    let videoInfo = that.attr("data-video-info");
    let avatar = that.data("avatar");
    let userName = that.data("userName");
    let channelLink = that.data("channelLink");
    videoInfo = eval(("("+videoInfo+")"))
    videoInfo.date = moi.formatDate(new Date(videoInfo.date),'YYYY-mm-dd HH:MM:SS')
    
    if (videoInfo.url) {
    const popupLayer = moi.popup();
    if (productIds) {
      $.ajax({
        type: "get",
        url: "/homeapi/products/list/" + productIds,
        dataType: "json",
        success: function (response) {
          if (!response.code) {
            render({
              products: response.data.list || [],
              videoInfo: videoInfo,
              userName:userName,
              channelLink:channelLink,
              avatar:avatar,
              data_from:'{{ data_from }}',
              btnText:"{{section.settings.btn_text}}",
              detail: that.find(".youtube_detail").text(),
              name: that.find(".youtube_name").text(),
              likeCount: that.find(".likeCount").text(),
              commentCount: that.find(".commentCount").text(),
              viewCount: that.find(".viewCount").text()
            })
            
          }
        }
      });
    }

    render({
      products: [],
      videoInfo: videoInfo,
      userName:userName,
      channelLink:channelLink,
      avatar:avatar,
      btnText:"{{section.settings.btn_text}}",
      detail: that.find(".youtube_detail").text(),
      name: that.find(".youtube_name").text(),
      likeCount: that.find(".likeCount").text(),
      commentCount: that.find(".commentCount").text(),
      viewCount: that.find(".viewCount").text()
    })


    function render(params) {
      engine
        .parseAndRender(videoLayerHtml, {
          lang: lang,
          ...params
        })
        .then(function (html) {
          popupLayer.addContent(html);
          {% comment %} addLazyImages(popupLayer.temp.find("img[data-src]")); {% endcomment %}
          popupLayer.temp.find(".popup-close").click(function () {
            popupLayer.close();
          });
          popupLayer.temp.find(".video-layer").scroll(function(){
             window.lazyImageShow()
          })
          popupLayer.temp.find(".video-layer-scroll").scroll(function(){
             window.lazyImageShow()
          })
        });
    }

    moi.addEvent("updateBlock", function () {
      if (popupLayer) {
        popupLayer.close()
      }
    });
    }   
});
}



})()
</script>

{% schema %}
{
	"tag": "",
	"class": "block_video_list",
	"is_global": false,
	"icon": "icon-shipinliebiao1",
	"name": {
		"zh_CN": "youtube列表",
		"en_US": "Youtube list"
	},
	"max_blocks": "20",
	"blocks": [
		{
			"name": {
				"zh_CN": "视频",
				"en_US": "Video"
			},
			"type": "video-item",
			"settings": [
				{
					"type": "card_video",
					"error": {
						"zh_CN": "输入地址错误",
						"en_US": "Wrong address entered"
					},
					"rule": [
						"youtube"
					],
					"label": {
						"zh_CN": "Youtobe视频ID",
						"en_US": "Youtobe video ID"
					},
					"placeholder": {
						"zh_CN": "请输入Youtube视频的URL",
						"en_US": "Please enter the URL of the Youtube video"
					},
					"info": {
						"zh_CN": "仅支持Youtube，请输入完整链接例如：https://www.youtube.com/watch?v=XXXXXX",
						"en_US": "Only support Youtube, please enter the complete links such as: https://www.youtube.com/watch?v=XXXXXX"
					},
					"id": "video",
					"default": {
						"id": "",
						"model": "",
						"value": ""
					}
				},
				{
					"type": "card_product_checkbox",
					"label": {
						"zh_CN": "关联商品",
						"en_US": "Associated product"
					},
					"max": 10,
					"id": "products",
					"default": []
				}
			]
		}
	],
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title",
			"default": "Youtube"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "描述",
				"en_US": "Description"
			},
			"id": "detail",
			"default": "Some description"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "展示方式",
				"en_US": "Mode of presentation"
			},
			"id": "show_type",
			"option": [
				{
					"label": {
						"zh_CN": "单排展示",
						"en_US": "Single show"
					},
					"value": "1"
				},
				{
					"label": {
						"zh_CN": "平铺展示",
						"en_US": "Tile display"
					},
					"value": "2"
				}
			],
			"default": "1"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "商品按钮文字",
				"en_US": "Product button text"
			},
			"default": "",
			"id": "btn_text"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "查看更多文案",
				"en_US": "Text of view more"
			},
			"id": "more_text",
			"default": ""
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "跳转链接",
				"en_US": "Jump links"
			},
			"default": "",
			"id": "link"
		}
	],
	"default": {
		"settings": {
			"title": "Youtube",
			"detail": "Some description",
			"show_type": "1",
			"more_text": "View More",
			"btn_text": "Shop now",
			"link": ""
		},
		"blocks": [
			{
				"video": {
					"value": "",
					"id": "",
					"model": ""
				},
				"products": [],
				"block_type": "video-item"
			},
			{
				"video": {
					"value": "",
					"id": "",
					"model": ""
				},
				"products": [],
				"block_type": "video-item"
			},
			{
				"video": {
					"value": "",
					"id": "",
					"model": ""
				},
				"products": [],
				"block_type": "video-item"
			},
			{
				"video": {
					"value": "",
					"id": "",
					"model": ""
				},
				"products": [],
				"block_type": "video-item"
			}
		]
	}
}
{% endschema %}